﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Left-Hand.aspx.cs" Inherits="Golf.WebUI.Left_Hand" %>

<%@ Register Src="~/UserControl/Header.ascx" TagName="Header" TagPrefix="UserHeader" %>
<%@ Register Src="~/UserControl/footer.ascx" TagName="Footer" TagPrefix="UserFooter" %>
<%@ Register Src="~/UserControl/ToolbarContainer.ascx" TagName="Toolbal" TagPrefix="UserToolbal" %>
<%@ Register Assembly="DevPager" Namespace="DevPager" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script src="Script/jquery/jquery-1.4.1.min-vsdoc.js" type="text/javascript"></script>

    <link href="Style/Base.css" rel="stylesheet" type="text/css" />
    <link href="Style/leftContent.css" rel="stylesheet" type="text/css" />
    <link href="Style/mainContent.css" rel="stylesheet" type="text/css" />
    <link href="Css/shared-not-home.css" rel="stylesheet" type="text/css" />
    <%--<link href="slider/jquery-ui-1.7.custom.css" rel="stylesheet" type="text/css" />--%>

    <script src="Script/common/jCarouselLite.js" type="text/javascript"></script>

    <script type="text/javascript">
        String.prototype.trim = function() {
            return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        } 
    </script>

    <style type="text/css">
        .subCatGridHover .product
        {
            width: 278px;
            padding: 30px 20px 12px 20px;
            overflow: auto;
            position: relative;
        }
        .subCatGridHover .product h3
        {
            width: 276px;
            height: 32px;
            padding-right: 8px;
            margin-bottom: 8px;
            float: left;
            font-size: .75em;
        }
        .subCatGridHover .product .image
        {
            width: 120px;
            height: 80px;
            margin-right: 10px;
            float: left;
            position: relative;
            font-size: 10px;
        }
        .subCatGridHover .product .price
        {
            position: absolute;
            top: 144px;
            right: 24px;
            font-size: 14px;
        }
        .subCatGridHover .product .price strong
        {
            font-size: 21px;
        }
        .subCatGridHover .product .commMsg
        {
            width: 146px;
            height: 44px;
            float: left;
            overflow: hidden;
            font-size: 11px;
            color: #6a6a6a;
        }
        .subCatGridHover .product .save
        {
            width: auto;
            position: absolute;
            top: 170px;
            right: 112px;
            font-size: 12px;
            font-weight: bold;
        }
        .subCatGridHover .product .save span
        {
            font-size: 12px;
        }
        .subCatGridHover .product .rrp
        {
            position: absolute;
            top: 170px;
            right: 24px;
            font-size: 12px;
            color: #737373;
        }
        .subCatGridHover .product .rating
        {
            width: 146px;
            margin-top: 2px;
            float: left;
        }
        .subCatGridHover .product .norating
        {
            display: none;
        }
        .subCatGridHover .product .stockWarning
        {
            margin: 0;
            float: left;
        }
        .subCatGridHover .product .btn_playVideo
        {
            float: left;
            margin: 54px 0 0 0;
        }
        .subCatGridHover .product a.btn_moreInfo
        {
            clear: left;
            float: right;
            margin: 55px 2px 0;
        }
        .subCatGridHover .product div.deal
        {
            width: 248px;
        }
        .subCatGridHover .product .newTag
        {
            left: auto;
            top: 155px;
            right: 190px;
        }
        .subCatGridHover .product .specialTag
        {
            left: auto;
            top: 155px;
            right: 188px;
        }
        #mainContent .centeredContent .copy
        {
            clear: both;
            margin-top: 30px;
        }
    </style>
    <%--A partial flush style--%>
    <style type="text/css">
        .productOverlay
        {
            background: url(/common/images/shell/overlayPixel.png) 0px 0px;
            top: 1px;
            left: 2px;
            position: absolute;
        }
        .productOverlay .retrievingData
        {
            z-index: 101;
            position: relative;
            padding: 20px 66px;
            margin: 120px auto;
            width: 49px;
            height: 82px;
            background: url(/common/images/category/retrievingData.png) no-repeat 0px 0px;
        }
    </style>
    <%--/*Current page*/--%>
    <style type="text/css">
        .pager
        {
            font-size: 0.7em;
        }
        .pager strong
        {
            padding: 0 5px;
            border: solid 1px #666;
            background: #e8e8e8;
            color: #333;
            margin: 0 3px;
        }
        .pager input[type=text]
        {
            height: 20px;
            line-height: 20px;
            margin-top: 5px;
        }
        .pager input[type=button]
        {
            height: 20px;
            padding: 0px;
            line-height: 20px;
            width: 40px;
            font-size: 12px;
        }
        .pager a
        {
            text-decoration: none;
            color: Black;
        }
        .pager a:hover
        {
            color: #444;
            text-decoration: none;
        }
    </style>

    <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-24545885-1']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>

</head>
<body>
    <form id="form1" runat="server" style="width: 1004px;">
    <UserHeader:Header ID="UserHeader" runat="server" />
    <%--Attribute to hide--%>
    <input id="hid_attr" type="hidden" runat="server" />
    <input id="_Typeid" type="hidden" runat="server" />
    <%--Partial refresh--%>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div class="leftContent">
        <div class="filters">
            <h3>
                <span>Shop for</span><br>
                Left Hand
            </h3>
            <ul id="returnTo">
                <li id="re_el"><a href="/Golf-Gloves/c1279.aspx" id="aReturnLink" class="return"
                    title="Golf Gloves">Return to Golf Gloves</a>
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <div class="subMenu">
                        <ul>
                            <asp:Repeater ID="rep_alltype" runat="server">
                                <ItemTemplate>
                                    <li><a href="Golfshow.aspx?typeid=<%#Eval("Id") %>" title="<%#Eval("TypeName") %>">
                                        <%#Eval("TypeName") %></a></li>
                                </ItemTemplate>
                            </asp:Repeater>
                        </ul>
                        <div class="bg" id="tl">
                        </div>
                        <div class="bg" id="tr">
                        </div>
                        <div class="bg" id="bl">
                        </div>
                        <div class="bg" id="br">
                        </div>
                    </div>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
            </ul>
            <div class="filter price">
                <asp:UpdatePanel ID="udpLeftNavPref" runat="server">
                    <ContentTemplate>
                        <p id="narrowBy">
                            Narrow your Results by:</p>
                        <h4>
                            Price Range</h4>
                        <div class="priceSlider">

                            <script src="slider/jquery-ui.min.js" type="text/javascript"></script>

                            <div id="priceSlider">

                                <script type="text/javascript">
                                    function attachSlider() {
                                        $("#priceSlider").slider({
                                            range: true,
                                            min: 25,
                                            max: 1000,
                                            values: [25, 1000],
                                            step: 5,
                                            slide: function(event, ui) {
                                                $("#txtLowerPriceBound").val(ui.values[0]);
                                                if (1000 != -1 && ui.values[1] == 1000) {
                                                    $("#txtUpperPriceBound").val(ui.values[1]);
                                                }
                                                else {
                                                    $("#txtUpperPriceBound").val(ui.values[1]);
                                                }
                                            },
                                            change: function(event, ui) {
                                                if (firePostback) {
                                                    __doPostBack('txtLowerPriceBound', '');
                                                }
                                            }
                                        });
                                    }
                                    var firePostback = true;
                                    function reSlider(min, max) {
                                        firePostback = false;
                                        $("#priceSlider").slider("option", "values", [min, max]);
                                        $("#txtLowerPriceBound").val(min);
                                        $("#txtUpperPriceBound").val(max);
                                        firePostback = true;
                                    }
                                    $(attachSlider());

                                    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
                                        function attachSlider() {
                                            var _min = $("#txtLowerPriceBound").val();
                                            var _max = $("#txtUpperPriceBound").val();
                                            $("#priceSlider").slider({
                                                range: true,
                                                min: 25,
                                                max: 1000,
                                                values: [_min, _max],
                                                step: 5,
                                                slide: function(event, ui) {
                                                    $("#txtLowerPriceBound").val(ui.values[0]);
                                                    if (1000 != -1 && ui.values[1] == 1000) {
                                                        $("#txtUpperPriceBound").val(ui.values[1]);
                                                    }
                                                    else {
                                                        $("#txtUpperPriceBound").val(ui.values[1]);
                                                    }
                                                },
                                                change: function(event, ui) {
                                                    if (firePostback) {
                                                        __doPostBack('txtLowerPriceBound', '');
                                                    }
                                                }
                                            });
                                        }
                                        var firePostback = true;
                                        function reSlider(min, max) {
                                            firePostback = false;
                                            $("#priceSlider").slider("option", "values", [min, max]);
                                            $("#txtLowerPriceBound").val(min);
                                            $("#txtUpperPriceBound").val(max);
                                            firePostback = true;
                                        }
                                        $(attachSlider());
                                    });
                                </script>

                            </div>
                        </div>
                        <div class="priceFrom">
                            $<asp:TextBox ID="txtLowerPriceBound" runat="server" AutoPostBack="true" OnTextChanged="txtLowerPriceBound_TextChanged">25</asp:TextBox>
                        </div>
                        <div class="priceTo">
                            $<asp:TextBox ID="txtUpperPriceBound" runat="server" OnTextChanged="txtLowerPriceBound_TextChanged">1000</asp:TextBox>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <div class="filtersBottom">
            </div>
        </div>
    </div>
    <div id="mainContent">
        <div class="subCatVisual">
            <!--The top of the page to flash slide effect hand don't delete or page complex public direct separation-->
            <!--#include virtual="Golfshow.js"-->
        </div>
        <div class="bannerR1">
            <a href="ProductDetail.aspx" title="OG Side Banner- European Delivery">
                <img src="http://images.onlinegolf.co.uk/Images/banner/EuropeanDelivery-New.jpg"
                    width="189" height="207" alt="OG Side Banner- European Delivery"></a>
        </div>
    </div>
    <div id="mainContent" style="padding-left: 20px; width: 910px;">
        <div class="centeredContent subCatContent" style="width: 100%;">
            <asp:UpdateProgress ID="listDetailPress" runat="server" AssociatedUpdatePanelID="udpProducts">
                <ProgressTemplate>
                    <div class="productOverlay" style="width: 905px; height: 681px; z-index: 100; background: url(/common/images/shell/overlayPixel.png) 0px 0px;">
                        <div class="retrievingData" style="background: url(/common/images/category/retrievingData.png) no-repeat 0px 0px">
                            <img src="/Common/images/category/loading.gif" /></div>
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
            <asp:UpdatePanel ID="udpProducts" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="resultsFilter" style="background: url(../images/left-hand/left_hand_filterbgtop.png) no-repeat scroll 0px 25px transparent;">
                        <div class="displayTabs">
                            <a id="btnListView" class="list" href="avascript:return false;" style="display: none;">
                            </a><a id="btnGridView" class="gridOn" href="javascript:return false;"></a>
                        </div>
                        <div class="clear">
                        </div>
                        <h2>
                            Best selling Left Hand</h2>
                        <%--Sort filter--%>
                        <div class="upperPaging pagination" style="background: url(../images/left-hand/left_hand_filterbgbottom.png) no-repeat scroll 0px center transparent;">
                            <div class="pager">
                                <cc1:DevNetPager ID="DevNetPager1" runat="server" DevPageUrl="page" PageSize="10"
                                    PrevAndNextPageShow="True" TextBoxGoToOrDropDownGoTo="False" TextBoxGoToOrDropDownGoToShow="False"
                                    FirstPage=' <img src="Images/pager/resultset_first.png" title="First Page" />'
                                    PrevPage=' <img src="Images/pager/resultset_previous.png" title="Previous Page"/>'
                                    NextPage=' <img src="Images/pager/resultset_next.png" title="Next Page" />' LastPage=' <img src="Images/pager/resultset_last.png" title="Last Page"  />'
                                    PageNavStyle="{0}">
                                </cc1:DevNetPager>
                            </div>
                        </div>
                    </div>
                    <div class="subCatGrid" style="width: 100%;">
                        <asp:Repeater ID="rep_proPage" runat="server">
                            <ItemTemplate>
                                <%# Container.ItemIndex % 3 == 0 ? "<div class=\"product withHover clearance\"  prod=\"" + Eval("id") + "\">" : "<div class=\"product withHover clearance divide\"  prod=\"" + Eval("id") + "\">"%>
                                <h3>
                                    <a href="ProductDetail.aspx?id=<%#Eval("id") %>" title="<%#Eval("Pro_Name")%>">
                                        <%#Eval("Pro_Name")%></a>
                                </h3>
                                <div class="image">
                                    <a href="ProductDetail.aspx?id=<%#Eval("id") %>" title="<%#Eval("Pro_Name")%>">
                                        <img src="ImageProducts/<%#Eval("Pro_Picture")%>" alt="<%#Eval("Pro_Name")%>" width="120"
                                            height="80">
                                    </a>&nbsp;</div>
                                <div class="commMsg">
                                </div>
                                <div class="rating">
                                    <div class="count" style="width: <%#Eval("Pro_Star") %>px;">
                                    </div>
                                </div>
                                <%#Convert.ToInt32(Eval("Pro_Save")) <= 0 ? "<div class=\"price\"> PRICE <strong>$" + Eval("Pro_PromotionPrice") + "</strong></div> <div class=\"save\"></div>" : "<div class=\"price\"> PRICE <strong>$" + Eval("Pro_PromotionPrice") + "</strong></div> <div class=\"save\">SAVE <span>" + Eval("Pro_Save") + "%</span></div> <div class=\"rrp\">MRRP $" + Eval("Pro_MarketPrice") + "</div>"%>
                                <div style="clear: both;">
                                </div>
                                <a href="ProductDetail.aspx?id=<%#Eval("id") %>" class="btn_moreInfo" title="<%#Eval("Pro_Name")%>">
                                    More Info</a> </div>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                    <div class="lowerPaging pagination" style="background: url(../images/left-hand/left_hand_paginationbg.png) no-repeat scroll 0px 0px transparent;">
                        <div class="pager">
                            <cc1:DevNetPager ID="DevNetPager2" runat="server" DevPageUrl="page" PageSize="10"
                                PrevAndNextPageShow="True" TextBoxGoToOrDropDownGoTo="False" TextBoxGoToOrDropDownGoToShow="False"
                                FirstPage=' <img src="Images/pager/resultset_first.png" title="First Page" />'
                                PrevPage=' <img src="Images/pager/resultset_previous.png" title="Previous Page"/>'
                                NextPage=' <img src="Images/pager/resultset_next.png" title="Next Page" />' LastPage=' <img src="Images/pager/resultset_last.png" title="Last Page"  />'
                                PageNavStyle="{0}">
                            </cc1:DevNetPager>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
    <div style="width: 1px; clear: both;">
    </div>
    <UserFooter:Footer ID="UserFooter" runat="server" />
    <UserToolbal:Toolbal ID="UserToolbal" runat="server" />
    <!--#include virtual="share.htm"-->
    </form>

    <script src="Script/MAD.js" type="text/javascript"></script>

    <div id="script_pro" runat="server">
    </div>

    <script>

        MAD.products.attachProductHover();

        MAD.products.productPopupHover();


        MAD.lightBox.init();
        function showLightBox(id) {
            return MAD.lightBox.show(id);
        }
    </script>

    <div class="overlay">
    </div>
    <!--产品灯箱-->
    <div class="lbEnlargeProduct lightbox">
        <div class="header">
            <a href="javascript:MAD.lightBox.hide();" title="Close" class="btn_close"></a>
            <h3>
            </h3>
        </div>
        <div class="content">
            <p class="commMsg">
            </p>
            <img src="/common/images/shell/blank.gif" />
            <a href="" title="" class="btn_viewProdDetails">View Full Product Details</a>
        </div>
    </div>
</body>
</html>
